import 'package:flutter/material.dart';
import 'package:flutterdome/components/custom_navbar.dart';

class NavbarExamplePage extends StatelessWidget {
  const NavbarExamplePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: Column(
        children: [
          // 标准导航栏示例
          CustomNavbar(
            title: '标准导航栏',
            showBackButton: true,
            backgroundColor: Colors.white,
          ),
          
          SizedBox(height: 20.0),
          
          // 带右侧操作按钮的导航栏
          CustomNavbar(
            title: '带操作按钮',
            showBackButton: true,
            actions: [
              IconButton(
                icon: Icon(Icons.search, color: Colors.black),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.more_vert, color: Colors.black),
                onPressed: () {},
              ),
            ],
          ),
          
          SizedBox(height: 20.0),
          
          // 深色背景导航栏
          CustomNavbar(
            title: '深色导航栏',
            showBackButton: true,
            backgroundColor: Colors.blue,
            titleColor: Colors.white,
          ),
          
          SizedBox(height: 20.0),
          
          // 无边框导航栏
          CustomNavbar(
            title: '无边框导航栏',
            showBackButton: true,
            showShadow: false,
          ),
          
          SizedBox(height: 20.0),
          
          // 无返回按钮导航栏
          CustomNavbar(
            title: '无返回按钮',
            showBackButton: false,
          ),
          
          SizedBox(height: 20.0),
          
          // 自定义内容导航栏 - 头像+搜索框样式
          CustomNavbar(
            title: '自定义内容', // title虽然必须提供，但这里不会显示
            showBackButton: true,
            backgroundColor: Colors.white,
            customContent: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                // 左侧返回按钮
                IconButton(
                  icon: Icon(Icons.arrow_back_ios, size: 20.0),
                  onPressed: () => Navigator.pop(context),
                ),
                
                // 中间搜索框
                Expanded(
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 10.0),
                    decoration: BoxDecoration(
                      color: Colors.grey[200],
                      borderRadius: BorderRadius.circular(16.0),
                    ),
                    padding: EdgeInsets.symmetric(horizontal: 12.0),
                    child: Row(
                      children: [
                        Icon(Icons.search, size: 18.0, color: Colors.grey[600]),
                        SizedBox(width: 8.0),
                        Text('搜索...', style: TextStyle(color: Colors.grey[600])),
                      ],
                    ),
                  ),
                ),
                
                // 右侧头像
                Container(
                  width: 36.0,
                  height: 36.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.blue,
                  ),
                  margin: EdgeInsets.only(right: 10.0),
                  child: Icon(Icons.person, size: 18.0, color: Colors.white),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}